<template>
  <div class="bgc-default pad-20">
    <div style="background-color: white;">
      <div class="flex-left">
        <template
          v-if="(getSupplierId() === null || getSupplierId() === '') && (getMemberId() === null || getMemberId() === '')">
          <div class="panel">
            <div class="height-98 flex-left pad-l-20 pad-r-20">
              <div class="mar-l-20 height-90 flex-item">
                <div class="mar-t-23" style="text-align: center;">
                  <div class="font-20" style="font-weight: bold;">修改信息和状态</div>
                  <div class="font-14 font-color-6 mar-t-5">批量修改信息和状态</div>
                </div>
              </div>
            </div>
            <div class="manage-row flex-center">
              <div class="createBtn seckillBtn" @click="handleModifyType(1)">批量修改</div>
            </div>
          </div>
          <div class="panel">
            <div class="height-98 flex-left pad-l-20 pad-r-20">
              <div class="mar-l-20 height-90 flex-item">
                <div class="mar-t-23" style="text-align: center;">
                  <div class="font-20" style="font-weight: bold;">修改价格/库存/规格信息和编码</div>
                  <div class="font-14 font-color-6 mar-t-5">批量修改价格/库存/规格信息和编码</div>
                </div>
              </div>
            </div>
            <div class="manage-row flex-center">
              <div class="createBtn seckillBtn" @click="handleModifyType(2)">批量修改</div>
            </div>
          </div>
          <div class="panel">
            <div class="height-98 flex-left pad-l-20 pad-r-20">
              <div class="mar-l-20 height-90 flex-item">
                <div class="mar-t-23" style="text-align: center;">
                  <div class="font-20" style="font-weight: bold;">修改图片/详情图</div>
                  <div class="font-14 font-color-6 mar-t-5">批量修改图片/详情图</div>
                </div>
              </div>
            </div>
            <div class="manage-row flex-center">
              <div class="createBtn seckillBtn" @click="handleModifyType(3)">批量修改</div>
            </div>
          </div>
          <div class="panel">
            <div class="height-98 flex-left pad-l-20 pad-r-20">
              <div class="mar-l-20 height-90 flex-item">
                <div class="mar-t-23" style="text-align: center;">
                  <div class="font-20" style="font-weight: bold;">修改授权仓库</div>
                  <div class="font-14 font-color-6 mar-t-5">批量修改授权仓库</div>
                </div>
              </div>
            </div>
            <div class="manage-row flex-center">
              <div class="createBtn seckillBtn" @click="handleModifyType(4)">批量修改</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="panel">
            <div class="height-98 flex-left pad-l-20 pad-r-20">
              <div class="mar-l-20 height-90 flex-item">
                <div class="mar-t-23" style="text-align: center;">
                  <div class="font-20" style="font-weight: bold;">修改状态</div>
                  <div class="font-14 font-color-6 mar-t-5">批量修改状态</div>
                </div>
              </div>
            </div>
            <div class="manage-row flex-center">
              <div class="createBtn seckillBtn" @click="handleModifyType(1)">批量修改</div>
            </div>
          </div>
          <div class="panel">
            <div class="height-98 flex-left pad-l-20 pad-r-20">
              <div class="mar-l-20 height-90 flex-item">
                <div class="mar-t-23" style="text-align: center;">
                  <div class="font-20" style="font-weight: bold;">修改价格/库存</div>
                  <div class="font-14 font-color-6 mar-t-5">批量修改价格/库存</div>
                </div>
              </div>
            </div>
            <div class="manage-row flex-center">
              <div class="createBtn seckillBtn" @click="handleModifyType(2)">批量修改</div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="top-operate-default mar-b-20">
      <div class="search-item">
        <label>搜索：</label>
        <el-input v-model="queryParams.keyword" @keyup.enter.native="handleSearch" placeholder="操作单号/操作人/操作人手机号"
          style="width: 300px"></el-input>
        <label class="mar-l-20">操作类型：</label>
        <el-select v-model="queryParams.modifyFieldsType" clearable class="pad-l-10 downSelect" placeholder="请选择状态">
          <el-option v-for="(item,index) in modifyFieldsTypeList" :key="index" :value="item.fieldId"
            :label="item.fieldLabel"></el-option>
        </el-select>
        <label class="mar-l-20">操作时间：</label>
        <el-date-picker v-model="starEndTime" type="daterange" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
        <el-button-group>
          <el-button type="primary" @click="handleSearch" style="margin-left: 10px">查询</el-button>
          <el-button plain="" @click="resetSearch">重置</el-button>
        </el-button-group>
      </div>
    </div>
    <!-- 操作区域 -->
    <div class="tabs-box mar-t-15">
      <el-tabs type="card" v-model="tabsPaneStatus" class="member-list-tab" @tab-click="handleClick">
        <el-tab-pane :label="allName" name="0"></el-tab-pane>
        <el-tab-pane :label="notSubmitName" name="1"></el-tab-pane>
        <el-tab-pane :label="modifyingName" name="2"></el-tab-pane>
        <el-tab-pane :label="invalidName" name="3"></el-tab-pane>
        <el-tab-pane :label="completeName" name="4"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 内容列表 -->
    <div class="table-container">
      <el-table ref="multipleTable" :data="taskList" @selection-change="handleSelectionChange" v-loading="listLoading"
        element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header"
        row-class-name="default-row">
        <el-table-column width="55px" type="selection"></el-table-column>
        <el-table-column label="操作单号" align="center" prop="taskNo">
        </el-table-column>
        <el-table-column label="商品类型" align="center" prop="goodsType">
          <template slot-scope="scope">
            <span v-if="dict && dict.goodsType">{{dict.goodsType[scope.row.goodsType]}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作类型" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.modifyFieldsList && scope.row.modifyFieldsList.length > 0">
              <div v-for="(key,index) in scope.row.modifyFieldsList">{{key}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100px" label="总商品数(个)" align="center" prop="totalNumber">
        </el-table-column>
        <el-table-column width="100px" label="成功数(个)" align="center" prop="totalSuccessNumber">
        </el-table-column>
        <el-table-column width="100px" label="失败数(个)" align="center" prop="totalFailNumber">
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <span>{{statusOptions[scope.row.status]}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作时间" align="center" prop="createTime">
        </el-table-column>
        <el-table-column width="140px" label="操作人" prop="operatorId" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{scope.row.operatorPhone}}</span>
            <span>&nbsp;&nbsp;{{scope.row.operatorName}}</span>
          </template>
        </el-table-column>
        <el-table-column width="140px" label="操作" align="right" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.status === 1" size="medium"
              @click="handleUpdateTaskStatus(scope.row,3,'作废')">作废
            </el-button>
            <el-button type="text" v-if="scope.row.status === 4 && scope.row.totalFailNumber > 0" size="medium"
              @click="handleExportGoodsRecord(scope.row.taskId,1)">下载失败商品</el-button>
            <el-button type="text" v-if="scope.row.status !== 2" size="medium"
              @click="handleToDetail(scope.row.taskId,scope.row.modifyType)">详情
            </el-button>
            <el-button v-if="scope.row.status === 3" type="text" size="medium" @click="handleDelete(scope.row.taskId)">
              删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.currentPage" :limit.sync="queryParams.size"
      @pagination="getList" />
  </div>
</template>

<script>
  import {
    paging,
    statisticsStatusNum,
    updateTaskStatus,
    deleteProjectGoodsBatchModifyTask,
    getModifyFieldTypeList,
    exportModifyTaskRecord
  } from '@/api/goods/batchModifyGoodsTask'
  import {
    getDictByGroupName,
    jumpToReportCenter
  } from '@/api/common/common'
  export default {
    components: {},
    directives: {},
    data() {
      return {
        taskList: [],
        total: 0,
        queryParams: {
          enterpriseId: this.getEnterpriseId(),
          supplierId: this.getSupplierId(),
          memberId: this.getMemberId(),
          currentPage: 1,
          size: 10,
          status: '',
          keyword: '',
          modifyFieldsType: ''
        },
        listLoading: true,
        multipleSelection: [],
        starEndTime: [],
        allName: '全部',
        notSubmitName: '待提交',
        modifyingName: '修改中',
        invalidName: '已作废',
        completeName: '已完成',
        allChecked: false,
        tabsPaneStatus: '0',
        statusOptions: [],
        dict: {},
        modifyFieldsTypeList: []
      }
    },
    // 初始化页面
    created() {
      getDictByGroupName('ProjectGoodsDTO').then(response => {
        this.dict = response.data
      })
      this.listModifyFieldTypeList()
      this.getList()
    },
    methods: {
      listModifyFieldTypeList() {
        getModifyFieldTypeList(this.getEnterpriseId(), this.getSupplierId(), this.getMemberId()).then(response => {
          if (response.isError) return
          this.modifyFieldsTypeList = response.data
        })
      },
      getStatisticsStatusNum() {
        statisticsStatusNum(this.queryParams).then(response => {
          if (response.isError) return
        })
      },
      getList() {
        this.listLoading = true
        if (this.starEndTime) {
          if (this.starEndTime.length > 0) {
            this.queryParams.startDate = this.starEndTime[0]
            this.queryParams.endDate = this.starEndTime[1]
          }
        } else {
          this.queryParams.startDate = ''
          this.queryParams.endDate = ''
        }
        this.queryParams.status = ''
        if (this.tabsPaneStatus !== '0') {
          this.queryParams.status = this.tabsPaneStatus
        }
        this.getStatisticsStatusNum()
        paging(this.queryParams).then(response => {
          if (response.isError) return
          this.taskList = response.data.records
          this.total = response.data.total
          this.listLoading = false
          this.statusOptions = response.data.dict.status
        })
      },
      handleClick() {
        this.queryParams.currentPage = 1
        this.getList()
      },
      handleClickBasic() {},
      handleSearch() {
        this.queryParams.currentPage = 1
        this.getList()
      },
      resetSearch() {
        this.searchReset()
        this.getList()
      },
      searchReset() {
        this.queryParams.currentPage = 1
        this.queryParams.keyword = ''
        this.queryParams.status = ''
        this.queryParams.modifyFieldsType = ''
        this.starEndTime = []
        this.queryParams.startDate = ''
        this.queryParams.endDate = ''
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        if (this.multipleSelection.length === this.taskList.length) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      },
      selectAll() {
        if (this.multipleSelection.length === 0 || this.multipleSelection.length < this.taskList.length) {
          this.taskList.forEach(item => {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      // 更新状态
      handleUpdateTaskStatus(row, status, statusLabel) {
        if (!statusLabel) {
          statusLabel = '保存'
        }
        if (status === 3) {
          this.$confirm('确定要' + statusLabel + '吗, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.handleUpdateTaskStatusMethod(row, status, statusLabel)
          }).catch(() => {})
        } else {
          this.handleUpdateTaskStatusMethod(row, status, statusLabel)
        }
      },
      // 执行更新状态方法
      handleUpdateTaskStatusMethod(row, status, statusLabel) {
        updateTaskStatus(row.taskId, status).then(response => {
          if (response.isError) return
          this.$message({
            message: statusLabel + '成功',
            type: 'success'
          })
          this.getList()
        })
      },
      // 导出
      // exportType：导出类型，-1:全部，0:待修改，1:失败，2:成功
      handleExportGoodsRecord(taskId, exportType) {
        var that = this
        var tips = ''
        if (exportType === -1) {
          tips = '导出全部'
        } else if (exportType === 0) {
          tips = '导出待修改'
        } else if (exportType === 1) {
          tips = '导出失败'
        } else if (exportType === 2) {
          tips = '导出成功'
        }
        that.$confirm('确定要' + tips + '数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          exportModifyTaskRecord(taskId, exportType).then(response => {
            if (response.isError) return
            that.$confirm('导出成功，正在异步生成数据,是否前往报表中心查看？', '提示', {
              confirmButtonText: '跳转',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              jumpToReportCenter(that)
            }).catch(() => {})
          })
        }).catch(() => {

        })
      },
      // 详情
      handleToDetail(taskId, modifyType) {
        this.$router.push({
          path: '/goods/batch-modify-task/detail/index',
          query: {
            taskId: taskId,
            modifyType: modifyType
          }
        })
      },
      // 批量修改类型
      // modifyType:1-修改信息和状态，2-修改价格/库存/规格信息和编码，3-修改图片/详情图 4-修改授权仓库
      handleModifyType(modifyType) {
        this.handleToDetail(0, modifyType)
      },
      handleDelete(taskId) {
        this.$confirm('确定要删除吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteProjectGoodsBatchModifyTask(taskId).then(response => {
            if (response.isError) return
            this.getList()
            this.$message({
              message: response.msg,
              type: 'success'
            })
          })
        }).catch(() => {})
      }
    }
  }
</script>

<style lang="less" scoped>
  .bgc-default {
    .flex-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .title-row {
      margin-top: 44px;
      margin-bottom: 25px;
    }

    .panel {
      width: 300px;
      height: 150px;
      border-radius: 4px;
      background: rgb(237, 244, 255);
      margin: 10px;
      box-shadow: 0px 3px 19px 0px rgba(154, 154, 154, 0.18);

      .line-x {
        line-height: 1.3;
      }

      img {
        border-radius: 50%;
      }

      .img-1 {
        background: #dffffd;
      }

      .img-2 {
        background: #eaf4ff;
      }

      .manage-row {
        margin: 0 24px;
        // border-top: 1px dashed #E5E5E5;

        .createBtn {
          height: 32px;
          line-height: 32px;
          border-radius: 4px;
          color: white;
          padding: 0 26px;
          font-size: 14px;

          &:hover {
            cursor: pointer;
          }
        }

        .seckillBtn {
          background-color: #46DEC6;
        }

        .postBtn {
          background-color: #409EFF;
        }
      }
    }
  }

  .downSelect {
    /deep/.el-input {
      width: 160px;
    }
  }
</style>
